<template>
  <view class="home">
    <!-- order -->
    <!-- 头部 start -->
    <uni-nav-bar fixed="true" statusBar="true" leftBtnShow="true" backgroundImage="linear-gradient(#3388FF, #6197f8)"
      :border="false" leftIcon="back" color="#fff" @clickLeft="clickLeft">
      <view class="uni-title">{{ title }}</view>
    </uni-nav-bar>
    <!-- 头部 end -->

    <!-- 内容 start -->
    <view class="content" :style="{ height: (offsetHeight - offsetTop - 10) + 'px' }">

      
      <view v-if="address && address.destMobile !==''" class="content-inner address flex" @click="lintoToAddressList">
        <view class="address-left">
          <view class="address-top flex flex-start">
            <view class="default-address" v-if="address.isDefault">默认</view>
            <view class="default-address flag-address">家</view>
            <view>{{ address.destProvinceName }} {{ address.destCityName }} {{ address.destRegionName }}</view>
          </view>
          <view class="address-mid">
            {{ address.destAddress }}
          </view>
          <view class="address-bot flex flex-start">
            <view class="name">{{ address.destName }}</view>
            <view class="phone">{{ address.destMobile }}</view>
          </view>
        </view>
        <view class="address-right">
          <view class="icon iconfont icon-youjiantou"></view>
        </view>
      </view>
      <view class="content-inner address flex" v-else @click="lintoToAddressList">
        <view class="address-left un-choose-address flex flex-start flex-center">
          <view class="icon iconfont icon-dizhi" style="font-size: 50rpx;padding-right: 10rpx;"></view>
          <view style="font-size: 30rpx;color: #333333;font-weight: 600;">请新增收货地址，把健康带回家</view>
        </view>
        <view class="address-right">
          <view class="icon iconfont icon-youjiantou"></view>
        </view>
      </view>
      <view class="innerBoxDrug" v-if="!isHaveDrugs">
        <view class="status">药品信息（共{{drugsList.length}}种）</view>
        <view class="drugInfoBox">
          <view class="drugInfo" v-for="(items, indexs) in drugsList" :key="indexs">
            <view class="drugInfo flex" v-for="(item, index) in items" :key="index">
              <view class="drugImg flex">
                <!-- <image mode="aspectFit" :src="item.url"></image> -->
                <view class="icon iconfont icon-yaopin-3" style="font-size: 160rpx;color:#3388FF"></view>
              </view>
              <view class="drugDes">
                <view style="font-weight: 500;">{{ item.drugGenericName }}</view>
                <view class="count" style="color: #777777;">*{{ item.spec }}</view>
              </view>
              <view class="drugPrice flex">
                <view>￥{{ item.hospPrice }}</view>
                <view class="count">*{{ item.amount }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="innerBoxDrug" v-else>
        <view class="status">药品信息</view>
        <view class="drugInfoBox">
          <view class="drugInfo flex" v-for="(item, index) in drugsList" :key="index">
            <view class="drugImg flex">
              <!-- <image mode="aspectFit" :src="item.url"></image> -->
              <view class="icon iconfont icon-yaopin-3" style="font-size: 160rpx;color:#3388FF"></view>
            </view>
            <view class="drugDes">
              <view style="font-weight: 500;">{{ item.drugGenericName }}</view>
              <view class="count" style="color: #777777;">*{{ item.spec }}</view>
            </view>
            <view class="drugPrice flex">
              <view>￥{{ item.hospPrice }}</view>
              <view class="count">*{{ item.amount }}</view>
            </view>
          </view>
        </view>
      </view>
      <!-- express -->
      <view class="content-inner">
        <view class="flex">
          <view class="express-title">配送</view>
          <view class="drugs-info flex  flex-end" style="align-items: center">
            <view class="flex flex-direction-col flex-end">
              <view>
                <text class="font-weight600">京东快递</text>
                <text>(送货上门)</text>
              </view>
              <view v-show="deliverTime">
                <text style="color: #3388FF;">【以实际配送时间为准】</text>
                <!-- <text class="font-weight600">{{ deliverTime.aaa }}</text>
                <text style="color: #3388FF;">{{ deliverTime.ddd }}</text>
                <text class="font-weight600">{{ deliverTime.LT }}</text> -->
              </view>
            </view>
            <view class="address-right">
              <view class="icon iconfont icon-youjiantou"></view>
            </view>
          </view>
        </view>
      </view>

      <!-- price -->
      <view class="content-inner">
        <view class="price innerBox">
          <view class="flex">
            <view>药品金额</view>
            <view class="price-des">￥{{ wahaha }}</view>
          </view>
          <view class="flex">
            <!-- <view>运费</view> -->
            <view>运费</view>
            <view class="price-des" v-if="expFee">
              ￥{{ expFee }}
            </view>
            <view v-else>
              请先选择地址
            </view>
          </view>
          <view class="flex all-price">
            <view>实付款：{{}}</view>
            <view class="price-des" v-if="expFee">￥{{ Number(wahaha) + Number(expFee) }}</view>
            <view v-else>
              请先选择地址
            </view>
          </view>
        </view>
      </view>

      <!-- 支付 -->
      <view class="content-inner">
        <view class="flex">
          <view class="express-title" style="width: 160rpx;">支付方式</view>
          <view class="drugs-info flex  flex-end" style="align-items: center" @click="popupShow = true">
            <view class="flex flex-direction-col flex-end" style="font-weight: 600;">
              在线支付
            </view>
            <view class="address-right">
              <view class="icon iconfont icon-youjiantou"></view>
            </view>
          </view>
        </view>
      </view>

      <view class="explain">发票或者其他问题，请联系 13889110151</view>
      <view class="btn-bottom flex flex-between">
        <view class="price-box" v-if="expFee">
          <text style="font-size: 32rpx;">￥</text>
          <text class="price-des">{{ Number(wahaha) + Number(expFee) }}</text>
        </view>
        <view class="price-box address-box" v-else>
          请先选择地址
        </view>
        <Button size="large" type="primary" style="width: 264rpx; margin: 0;" :disabled="!address || address.destMobile =='' || !expFee"
          @click="createPaySJ">提交订单</Button>
        <!-- <Button size="large" type="primary" style="width: 264rpx; margin: 0;" :disabled="btnDisabledFlag" @click="createOrder" :disabled="expFee ==''">提交订单</Button> -->
      </view>
      <view class="lastDom"></view>
      <!-- 支付弹窗 -->
      <u-popup :show="popupShow" mode="bottom" :round="30" @close="close" @open="open">
        <view style="min-height: 300rpx;">
          <view class="flex title">
            支付方式
            <u-icon class="icon-pos" name="close" color="#999999" size="38" @click="popupShow = false"></u-icon>
          </view>
          <view class="pay-list flex flex-between" style="align-items: center" v-for="(item, index) in payList"
            :key="index" :class="['pay-list flex flex-between', item.choose?'':'gray']">
            <view class="flex flex-start pay-content">
              <view>
                <image class="pay-img" :src="item.icon" />
              </view>
              <view class="pay-name">{{ item.name }}</view>
            </view>
            <view>
              <view v-if="!item.choose" class="icon iconfont icon-weixuanze"></view>
              <view v-else class="icon iconfont icon-xuanzhong"></view>
            </view>
          </view>
          <view style="height: 200rpx;"></view>
          <view class="btn-bottom">
            <Button size="large" type="primary" @click="popupShow = false">确定</Button>
          </view>
        </view>
      </u-popup>
    </view>
    <!-- 头部信息 start -->
    <!-- 头部信息 end -->

  </view>
</template>

<script>
import hccmStore from "@/common/hccm-store.js"
import mRequest from "@/api/home"
import hccmConfig from "@/common/hccm-config.js"
import moment from '@/static/js/moment'
export default {
  data () {
    return {
      offsetTop: hccmStore.getOffsetTop(), //安全高度
      offsetHeight: hccmStore.getOffsetHeight(), //安全高度
      hospTotalPrice: '',//总价
      hospTotalPriceBak: '',
      userInfo: hccmStore.getUser(),
      deliverTime: {},
      prescriptionId: '',
      selfPrescriptionId: [],
      title: '填写订单',
      hospId: '',//主要是医院那边传来的数据
      popupShow: false,
      btnDisabledFlag: true,
      address: null,
      isChooseAddress: false,
      expFee: '',
      payList: [
        {
          icon: require('@/static/image/wx.png'),
          name: '微信支付',
          id: 'yibao',
          choose: true,
        },
        // {
        //   icon: require('@/static/image/yb.png'),
        //   name: '医保支付',
        //   id: 'yibao',
        //   choose: false,
        // }
      ],
      drugsList: [],
      isCreatedOrder: false,
      orderId: '', //生成了订单号
      status: '',
      isHaveDrugs: false,
      wahaha: 0,
    }
  },
  onLoad (options) {
    setTimeout(() => {
      console.log(this.orderId)
    }, 1500);
    console.log('optionsoptions',options)
    // 进来之后先查询订单有没有生成，没有生成的话，直接用getPrescriptionDetail（药品列表），有的话需要调用getOrder把数据回显上去
    this.prescriptionId = options.prescriptionId
    this.status = options.status
    if(options.drugsList){
      this.drugsList = JSON.parse(options.drugsList)
      if(this.drugsList[0] && this.drugsList[0].amount){
        this.isHaveDrugs = true
      }
      console.log('this.drugsListdrugsListdrugsListdrugsList',typeof this.drugsList[0],this.drugsList[0])
    }
    // this.hospTotalPrice = Number(options.hospTotalPrice)
    this.hospTotalPriceBak = Number(options.hospTotalPrice)
    console.log('this.hospTotalPriceBak',options.hospTotalPrice)
    this.hospId = options.hospId || ''
    if(options.hisPrescriptionId){
      this.hisPrescriptionId = options.hisPrescriptionId
    }

    this.getPrescriptionByHospPrIdAndHospId()
    if (options.address) {
      this.address = JSON.parse(options.address)
      this.isChooseAddress = true
      this.freightQuery()
    }else{
      this.isChooseAddress = false
    }
  },
  onShow () {
  },
  methods: {
    momentTime (data, options) {
      return moment(data).format(options)
    },
    clickLeft () {
      uni.navigateBack()
    },
    // 药品列表
    getPrescriptionDetail () {
      let params = {
        prescriptionIds: this.prescriptionId,
      }
      mRequest.getPrescriptionDetail(params).then(
        res => {
          // this.drugsList = res.responseData
        },
        error => {
          console.log(error)
        },
      )
    },
    createPaySJ () {
      mRequest.prePay({ openid: hccmStore.getWxOpenId(), orderId: this.orderId }).then(res => {
        this.createPay1(res.responseData)
      })
    },
    // 获取地址列表
    getAddressList () {
      let params = {
        patientMobile: hccmStore.getUserPhone(),
        currentPage: 1,
        pageSize: 1000
      }
      mRequest.getAddress(params).then(
        res => {
          this.address = res.responseData.filter(item => {
            return item.isDefault == true
          })[0]
        },
        error => {
          console.log(error)
        }
      )
    },
    lintoToAddressList () {
      uni.navigateTo({
        url: `/pages/address/address-list?addressJson=${JSON.stringify(this.address)}&chooseFlag=true&prescriptionId=${this.prescriptionId}&hospTotalPrice=${this.hospTotalPrice}&hospId=${this.hospId}&drugsList=${JSON.stringify(this.drugsList)}`,
        success: res => { },
        fail: () => { },
        complete: () => { },
      })
    },
    open () {
      // console.log('open');
    },
    close () {
      this.popupShow = false
      // console.log('close');
    },
    // 根据医院处方id和医院id获取处方
    getPrescriptionByHospPrIdAndHospId(){
      let params = {
        hisprescriptionIds: this.prescriptionId.split(','),
        hospId: this.hospId
      }
      mRequest.getPrescriptionByHospPrIdAndHospId(params).then(
        res => {
          if(res.responseData.totalPrice){
            this.hospTotalPrice = res.responseData.totalPrice
          }else{
            this.hospTotalPrice = this.hospTotalPriceBak
          }
          if(this.drugsList.length == 0){
            this.drugsList = []
            this.selfPrescriptionId = []
            res.responseData.prescriptionList.map(item => {
              this.drugsList.push(item.prescriptionDetails)
              this.selfPrescriptionId.push(item.prescriptionId)
            })
            this.getOrderByPreIdAndHospIds()
          }else{
            // 药品列表
            this.selfPrescriptionId = []
            res.responseData.prescriptionList.map(item => {
              this.selfPrescriptionId.push(item.prescriptionId)
            })
            this.getOrderByPreIdAndHospIds()
          }
        },
        error => {
          console.log(error)
        }
      )
    },
    // 查询订单（先看看有没有生成订单，有的话直接赋值）
    getOrderByPreIdAndHospIds () {
      let params = {
        currentPage: 1,
        pageSize: 100,
        prescriptionIds: this.selfPrescriptionId,
        hospId: this.hospId
      }
      if(this.selfPrescriptionId.length <= 0){
        params.prescriptionIds = this.prescriptionId.split(',')
      }else{
        params.prescriptionIds = this.selfPrescriptionId
      }
      mRequest.getOrderByPreIdAndHospIds(params).then(
        res => {
          // let aaa = res.responseData.filter(item => {
          //   return item.prescriptionId == this.prescriptionId
          // })
          let aaa = res.responseData
          // 需要取未支付的订单
          if (aaa.length > 0) {
            // this.hospTotalPrice = Number(aaa[0].goodsFee)
            this.isCreatedOrder = true
            this.orderId = aaa[0].orderId
            if(!this.isChooseAddress){
              this.address = aaa[0]
              this.freightQuery()
            }
            this.getPrescriptionDetail()
          } else {
            // this.hospTotalPrice = this.hospTotalPriceBak
            this.isCreatedOrder = false
            this.getPrescriptionDetail()
          }


          // 根据 isCreatedOrder 是否创建订单
          this.createOrderShengJing()
        },
        error => {
          console.log(error)
        }
      )
    },
    freightQuery () {
      if(this.address && this.address.destMobile !== ''){
        let params = {
          // outTradeNo: this.prescriptionId,
          // prescriptionId: this.prescriptionId,
          payType: '微信',
          paySource: '小程序',
          drugstoreName: '辽宁国瑞新特药药房',
          drugstoreParentName: '辽宁国瑞新特药药房2',
          patientMobile: hccmStore.getUserPhone(),
          destName: this.address.destName,
          destMobile: this.address.destMobile,
          destProvinceName: this.address.destProvinceName,
          destProvinceId: this.address.destProvinceId,
          destCityName: this.address.destCityName,
          destCityId: this.address.destCityId,
          destRegionName: this.address.destRegionName,
          destRegionId: this.address.destRegionId,
          destAddress: this.address.destAddress,
          memo: "患者备注",
        }
        mRequest.freightQuery(params).then(
          res => {
            this.expFee = Number(res.responseData.exFee)
            this.deliverTime = {
              aaa: this.momentTime(res.responseData.deliverTime, 'MMMDo'),
              ddd: `【${this.momentTime(res.responseData.deliverTime, 'dddd')}】`,
              LT: this.momentTime(res.responseData.deliverTime, 'LT'),
            }
            setTimeout(() => {
              this.updateOrderByOrderId()
            }, 500);
          },
          error => {
            console.log(error)
          }
        )
      }
    },
    // 创建订单
    // 多传处方ids
    createOrder () {
      if (!this.isCreatedOrder && this.status !== -10) {
        let params = {
          outTradeNo: this.prescriptionId,
          prescriptionId: this.prescriptionId,
          payType: '微信',
          paySource: '小程序',
          drugstoreName: '辽宁国瑞新特药药房',
          drugstoreParentName: '辽宁国瑞新特药药房2',
          patientMobile: hccmStore.getUserPhone(),
          destName: this.address.destName,
          destMobile: this.address.destMobile,
          destProvinceName: this.address.destProvinceName,
          destProvinceId: this.address.destProvinceId,
          destCityName: this.address.destCityName,
          destCityId: this.address.destCityId,
          destRegionName: this.address.destRegionName,
          destRegionId: this.address.destRegionId,
          destAddress: this.address.destAddress,
          expFee: this.expFee,
          memo: "患者备注",
        }
        mRequest.createOrder(params).then(
          res => {
            this.createPay(res.responseData)
          },
          error => {
            console.log(error)
          }
        )
      } else {
        this.createPay(this.orderId)
      }
    },
    // 盛京创建订单
    // 多传处方ids
    createOrderShengJing () {
      if (!this.isCreatedOrder && this.status !== -10) {
        let params = {
          prescriptionIds: this.selfPrescriptionId,
          payType: '微信',
          paySource: '小程序',
          drugstoreName: '辽宁国瑞新特药药房',
          drugstoreParentName: '辽宁国瑞新特药药房2',
          patientMobile: hccmStore.getUserPhone(),
          expFee: this.expFee || 0,
          memo: "患者备注",
        }
        if(this.address && this.address.destName){
          params.destName = this.address.destName
          params.destMobile = this.address.destMobile
          params.destProvinceName = this.address.destProvinceName
          params.destProvinceId = this.address.destProvinceId
          params.destCityName = this.address.destCityName
          params.destCityId = this.address.destCityId
          params.destRegionName = this.address.destRegionName
          params.destRegionId = this.address.destRegionId
          params.destAddress = this.address.destAddress
        }
        mRequest.createOrderShengJing(params).then(
          res => {
            this.orderId = res.responseData
            // this.createPay(res.responseData)
          },
          error => {
            console.log(error)
          }
        )
      } else {
        // this.createPay(this.orderId)
      }
    },
	// 更新订单
	updateOrderByOrderId(){
		let params = {
		  orderId: this.orderId,
	    expFee: this.expFee || 0,
		  goodsFee: this.wahaha || 0,
	  }
	  if(this.address && this.address.destName){
	    params.destName = this.address.destName
	    params.destMobile = this.address.destMobile
	    params.destProvinceName = this.address.destProvinceName
	    params.destProvinceId = this.address.destProvinceId
	    params.destCityName = this.address.destCityName
	    params.destCityId = this.address.destCityId
	    params.destRegionName = this.address.destRegionName
	    params.destRegionId = this.address.destRegionId
	    params.destAddress = this.address.destAddress
	  }
	  mRequest.updateOrderByOrderId(params).then(
	    res => {
	      // this.orderId = res.responseData
	      // this.createPay(res.responseData)
	    },
	    error => {
	      console.log(error)
	    }
	  )
	},
    createPay1 (payObj) {
      let that = this
      uni.requestPayment({
        provider: 'wxpay',
        timeStamp: String(payObj.timeStamp),
        nonceStr: payObj.nonceStr,
        package: payObj.pack,
        partnerid: '1535708581',      // 微信支付商户号
        signType: payObj.signType,
        paySign: payObj.paySign,
        destName: this.address.destName,
        destMobile: this.address.destMobile,
        destProvinceName: this.address.destProvinceName,
        destProvinceId: this.address.destProvinceId,
        destCityName: this.address.destCityName,
        destCityId: this.address.destCityId,
        destRegionName: this.address.destRegionName,
        destRegionId: this.address.destRegionId,
        destAddress: this.address.destAddress,
        expFee: this.expFee,
        success: function (res) {
          if(that.hospId){
            uni.redirectTo({
              //关闭当前页面，跳转到应用内的某个页面。
              url:`/pages/order-list/order-list?hospId=${that.hospId}`
            });
          }else{
            uni.redirectTo({
              //关闭当前页面，跳转到应用内的某个页面。
              url:`/pages/home-main/home-main`
            });
          }
        },
        fail: function (err) {
          uni.redirectTo({
            //关闭当前页面，跳转到应用内的某个页面。
            url:`/pages/home-main/home-main`
          });
          console.log(that.hospId)
          console.log('fail:' + JSON.stringify(err));
        }
      });
    },
  },
  watch:{
    address(newVal){
      console.log(newVal)
    },
    drugsList:{
      handler(val, oldVal) {
        if(this.isHaveDrugs){
          let aaa = 0
          val.map(item=>{
            aaa = aaa + Number(item.hospPrice) * Number(item.amount) 
          })
          this.wahaha = aaa.toFixed(2)
        }else{
          let aaa = 0
          val.map(item=>{
            item.map(items=>{
              aaa = aaa + Number(items.hospPrice) * Number(items.amount) 
            })
          })
          this.wahaha = aaa.toFixed(2)
        }
      },
			deep:true, // 深度监听
			immediate:true, // 初始化监听
    }
  }
}
</script>

<style lang="scss">
@import "@/static/css/index.scss";

// begin
.home {
  height: 100%;
  overflow: hidden;

  .content {
    overflow: auto;
    background-image: linear-gradient(#6197f8, #f5f5f5, #f5f5f5);

    .lastDom {
      // height: 160rpx;
      background: #f5f5f5;
      width: 100%;
    }

    .titile {
      color: #000000;
      font-size: 30rpx;
      font-weight: 600;
      padding-bottom: 30rpx;
    }

    .content-inner {
      padding: 30rpx;
      margin: 30rpx;
      background: #fff;
      border-radius: 30rpx;
      box-shadow: 0 1px 6px #ccc;

      .drugs-list {
        flex: 1;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        .drugs-info {
          height: 160rpx;
          width: 160rpx;
          background: #F6F6F6;
          border-radius: 16rpx;
          margin-right: 20rpx;
        }
      }

      .drugs-right {
        min-width: 100rpx;
        justify-content: flex-end;
        font-size: 24rpx;
        color: #666;
      }

      .drug-box {
        display: flex;
        flex-wrap: wrap;
        flex: 1;

        .drug-inner-des {
          height: 154rpx;
          width: 154rpx;
          background: #F6F6F6;
          margin: 0 15rpx 15rpx 0;
          border-radius: 16rpx;
          overflow: hidden;

          .drug-image {
            height: 154rpx;
            width: 154rpx;
          }
        }
      }

      .goods-info {
        background: #F6F6F6;
        font-size: 24rpx;
        color: #666;
        margin-top: 28rpx;
        border-radius: 10rpx;
        padding: 24rpx;
      }

      .express-title {
        width: 100rpx;
        font-size: 32rpx;
        font-weight: 600;
      }

      .drugs-info {
        flex: 1;
        font-size: 28rpx;
      }

      .price {
        .flex {
          font-size: 28rpx;
          justify-content: space-between;
          padding: 16rpx 0;
          color: #666666;

          .price-des {
            color: #333;
            font-weight: 600;
            font-size: 30rpx;
          }
        }

        .all-price {
          font-weight: 600;
          justify-content: flex-end;
          color: #333;

          .price-des {
            color: #3388FF;
          }
        }
      }
    }

    .icon-youjiantou {
      font-size: 36rpx;
      color: #A8A8A8;
    }

    .address {
      padding: 32rpx 24rpx 28rpx 34rpx;

      .address-left {
        flex: 1;

        .address-top {
          align-items: center;
          font-size: 24rpx;

          .default-address {
            font-size: 22rpx;
            height: 40rpx;
            line-height: 40rpx;
            background: #3388FF;
            color: #fff;
            margin-right: 10rpx;
            padding: 0 14rpx;
            border-radius: 4rpx;
          }

          .flag-address {
            background: #F7BA2B;
            margin-right: 10rpx;
          }
        }

        .address-mid {
          font-size: 30rpx;
          color: #333;
          padding: 14rpx 0;
          font-weight: 600;
        }

        .address-bot {
          font-size: 24rpx;
          color: #666666;

          .name {
            padding-right: 20rpx;
          }
        }
      }

      .un-choose-address {
        padding: 30rpx 0;
      }
    }
  }

  .price-box {
    color: #3388FF;
    font-size: 52rpx;
    font-weight: 500;
  }

  .address-box {
    color: #666666;
    font-size: 30rpx;
    font-weight: 400;
    padding-top: 24rpx;
  }

  .address-right {
    width: 40rpx;
    height: 40rpx;
    text-align: center;
    align-items: center;
    line-height: 40rpx;
    margin-left: 10rpx;
  }

  .title {
    font-size: 40rpx;
    color: #000000;
    font-weight: 600;
    padding: 44rpx 0;
    position: relative;

    .u-icon {
      position: absolute;
      right: 40rpx;
      top: 50rpx;
    }
  }

  .pay-list {
    margin: 0 30rpx;
    padding: 22rpx 0;
    border-bottom: 1rpx solid #ECECEC;

    .pay-content {
      align-items: center;

      .pay-img {
        height: 72rpx;
        width: 72rpx;
        margin-right: 20rpx;
      }

      .pay-name {
        font-size: 30rpx;
        color: #333333;
        font-weight: 500;
      }
    }

    .icon {
      font-size: 52rpx;
      color: #999;
    }

    .icon-xuanzhong {
      color: #3388FF;
    }
  }
}

.drugInfoBox {
  max-height: 500rpx;
  overflow: auto;
}

.innerBoxDrug {
  margin: 30rpx 30rpx 24rpx;
  box-sizing: border-box;
  padding: 32rpx 24rpx;
  background: #fff;
  border-radius: 16rpx;

  .status {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
  }

  // 药品信息
  .drugInfo {
    margin-bottom: 20rpx;

    .drugImg {
      height: 160rpx;
      width: 160rpx;
      border-radius: 16rpx;
      overflow: hidden;
      background: #F6F6F6;
      margin-right: 24rpx;

      image {
        height: 160rpx;
        width: 160rpx;
      }
    }

    .drugDes {
      flex: 1;
      height: 120rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      font-size: 30rpx;
    }

    .drugPrice {
      height: 120rpx;
      color: #000000;
      font-size: 32rpx;
      font-weight: 600;
      flex-direction: column;
      align-items: flex-end;
      justify-content: space-around;

      .count {
        color: #777777;
        font-size: 24rpx;
        font-weight: 400;
      }
    }
  }
}
.gray{
  filter: grayscale(1);
}
button[disabled] {
  background: #F6F6F6 !important;
  color: #777777;
  border-color: #F6F6F6 !important;
}
</style>
